<style scoped lang="scss">
* {
  font-size: 17px;
}

.ment {
  width: 96%;
  height: 2220px;
  background-color: #f1f1f1;
}

.top {
  height: 40px;
  line-height: 52px;
  margin-left: 20px;
  color: #999999;
}

//  关系 -
:deep(.van-field__control::-webkit-input-placeholder) {
  text-align: right;
}

//    <!-- 姓名 -->
.xingmin {
  width: 100%;
  height: 40px;
  background-color: white;

  div {
    width: 97%;
    margin-left: 10px;
    height: 40px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    span {
      margin-left: 6px;
      line-height: 40px;
    }

    input {
      text-align: right;
      border: none;
      width: 110px;
      position: absolute;
      right: 0px;
      margin-right: 14px;
      line-height: 35px;
    }
  }
}

//     <!-- 性别 -->
.xb {
  width: 100%;
  height: 40px;
  background-color: white;

  div {
    width: 97%;
    margin-left: 10px;
    height: 40px;

    border-bottom: 1px solid #ccc;

    span {
      line-height: 38px;
      float: left;
      margin-left: 6px;
    }

    .van-radio-group {
      width: 200px;
      float: left;
      height: 20px;
      position: absolute;
      right: 0;
      border: none;

      .van-radio {
        width: 60px;
        float: left;
      }
    }
  }
}

// 
.koate {
  width: 90%;
  height: 40px;
  line-height: 50px;
  margin-left: 26px;
}

//     <!-- 体重 -->
.tg {
  width: 100%;
  height: 40px;
  background-color: white;

  div {
    width: 97%;
    margin-left: 10px;
    height: 40px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

    span {
      line-height: 38px;
      float: left;
      margin-left: 6px;
    }

    input {
      text-align: right;
      border: none;
      width: 80px;
      position: absolute;
      right: 0px;
      margin-right: 8px;
      line-height: 35px;
    }
  }
}

//     <!-- BMi -->
.BMi {
  width: 100%;
  background-color: white;
  height: 40px;

  div {
    width: 97%;
    margin-left: 10px;
    height: 40px;
    border-bottom: 1px solid #ccc;

    span {
      line-height: 38px;
      float: left;
      margin-left: 6px;
    }

    input {
      border: none;
      width: 120px;
      position: absolute;
      right: 18px;
      margin-top: 10px;
    }
  }
}

//    <!-- 腰围 -->
.yw {
  width: 100%;

  background-color: white;
  height: 40px;


}

//     <!-- 吸烟史 -->
.xys {
  margin-top: 15px;
  border-bottom: 1px solid #ccc;
}

//     <!-- 肝功能 -->
.gz {
  margin-top: 12px;
  height: 90px;
  width: 100%;
  background-color: white;

  span {
    line-height: 38px;
    margin-left: 8px;
  }

  div {
    width: 97%;
    margin-left: 10px;
    height: 50px;
    border-bottom: 1px solid #ccc;

    li {
      float: left;
      width: 61px;
      height: 39px;
      background-color: #f4f4f4;
      margin-right: 20px;
      text-align: center;
      color: #666666;
      line-height: 40px;
      border-radius: 27px;
      margin-top: 0px;
    }
  }
}

//     <!-- 肾功能 -->
.sheng {
  height: 90px;
  background-color: white;

  span {
    line-height: 38px;
    margin-left: 8px;
  }

  div {
    margin-left: 8px;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #ccc;

    li {
      float: left;
      width: 61px;
      height: 39px;
      background-color: #f4f4f4f4;
      margin-right: 20px;
      color: #666666;
      text-align: center;
      border-radius: 27px;
      line-height: 40px;
    }
  }
}

//     <!-- 婚姻状况 -->
.hyzq {
  width: 100%;
  background-color: white;

  span {
    line-height: 38px;
    margin-left: 8px;
  }

  div {
    margin-left: 8px;
    width: 100%;
    height: 50px;
    border-bottom: 1px solid #ccc;

    li {
      float: left;
      width: 64px;
      text-align: center;
      color: #666666;
      line-height: 40px;
      height: 42px;
      border-radius: 27px;
      background-color: #f4f4f4;
      margin-right: 26px;
    }
  }
}

//     <!-- 生育状态 -->
.sy {
  width: 100%;
  background-color: white;

  span {
    line-height: 40px;
    margin-left: 8px;
  }

  div {
    width: 97%;
    height: 50px;
    border-bottom: 1px solid #ccc;

    li {
      width: 70px;
      text-align: center;
      height: 38px;
      color: #666666;
      margin-right: 20px;
      float: left;
      border-radius: 27px;
      line-height: 42px;
      background-color: #f4f4f4;
    }
  }
}

//     <!-- 慢性病 -->
.mxb {
  width: 100%;
  margin-top: 12px;
  background-color: white;
  height: 200px;

  span {
    line-height: 40px;
    margin-left: 8px;
  }

  div {
    width: 97%;
    height: 140px;

    li {
      float: left;
      margin-top: 10px;
      width: 18%;
      background-color: #f4f4f4;
      margin-right: 0px;
      margin-left: 8px;
      height: 38px;
      text-align: center;
      width: 92px;
      border-radius: 27px;
      color: #666666;
      line-height: 40px;
      text-align: center;
    }

    li:nth-child(1) {
      width: 17%;
    }

    li:nth-child(2) {
      width: 20%;
    }

    li:nth-child(3) {
      width: 20%;
    }

    li:nth-child(4) {
      width: 20%;
    }

    li:nth-child(5) {
      width: 28%;
    }

    li:nth-child(6) {
      width: 17%;
    }

    li:nth-child(8) {
      width: 17%;
    }

    li:nth-child(9) {
      width: 17%;
    }
  }
}

// 家族病史
.jzbs {
  width: 100%;
  height: 280px;
  margin-top: 15px;
  background-color: white;

  span {
    margin-left: 10px;
    line-height: 40px;
  }

  div {
    li {
      float: left;
      margin-left: 10px;
      margin-right: 0px;
      line-height: 35px;
      margin-top: 10px;
      width: 20%;
      text-align: center;
      border-radius: 27px;
      color: #666666;
      background-color: #f4f4f4;
    }

    li:nth-child(1) {
      width: 17%;
    }

    li:nth-child(2) {
      width: 21%;
    }

    li:nth-child(3) {
      width: 21%;
    }

    li:nth-child(4) {
      width: 21%;
    }

    li:nth-child(5) {
      width: 17%;
    }

    li:nth-child(6) {
      width: 17%;
    }

    li:nth-child(7) {
      width: 20%;
    }

    li:nth-child(8) {
      width: 17%;
    }

    li:nth-child(9) {
      width: 17%;
    }

    li:nth-child(10) {
      width: 17%;
    }

    li:nth-child(11) {
      width: 20%;
    }

    li:nth-child(12) {
      width: 20%;
    }

    li:nth-child(13) {
      width: 24%;
    }

    li:nth-child(14) {
      width: 42%;
    }

    li:nth-child(15) {
      width: 20%;
    }

    li:nth-child(16) {
      width: 17%;
    }

    li:nth-child(17) {
      width: 34%;
    }

    li:nth-child(18) {
      width: 17%;
    }
  }
}

//     <!-- 药物过敏 -->
.ywgm {
  background-color: white;
  margin-top: 12px;
  height: 220px;

  span {
    line-height: 40px;
    margin-left: 8px;
  }

  div {
    li {
      width: 28%;
      float: left;
      margin-left: 10px;
      margin-right: 10px;
      color: #666666;
      background-color: #f4f4f4;
      margin-top: 10px;
      text-align: center;
      line-height: 34px;
      border-radius: 27px;
      height: 32px;
    }

    li:nth-child(1) {
      width: 17%;
    }

    li:nth-child(2) {
      width: 19%;
    }

    li:nth-child(3) {
      width: 19%;
    }

    li:nth-child(4) {
      width: 32%;
    }

    li:nth-child(5) {
      width: 24%;
    }

    li:nth-child(6) {
      width: 19%;
    }

    li:nth-child(7) {
      width: 19%;
    }

    li:nth-child(8) {
      width: 26%;
    }

    li:nth-child(9) {
      width: 25%;
    }

    li:nth-child(10) {
      width: 25%;
    }

    li:nth-child(11) {
      width: 19%;
    }
  }
}

//  <!--  食物接触过敏-->
.swjc {
  margin-top: 12px;
  background-color: white;
  height: 190px;

  span {
    line-height: 40px;
    margin-left: 8px;
  }

  div {
    li {
      float: left;
      width: 20%;
      margin-left: 10px;
      margin-right: 5px;
      text-align: center;
      color: #666666;
      border-radius: 27px;
      background-color: #f4f4f4;
      margin-top: 10px;
      line-height: 35px;
    }

    li:nth-child(1) {
      width: 17%;
    }

    li:nth-child(2) {
      width: 17%;
    }

    li:nth-child(3) {
      width: 17%;
    }

    li:nth-child(4) {
      width: 20%;
    }

    li:nth-child(5) {
      width: 17;
    }

    li:nth-child(6) {
      width: 17%;
    }

    li:nth-child(7) {
      width: 17%;
    }

    li:nth-child(8) {
      width: 17%;
    }

    li:nth-child(9) {
      width: 26%;
    }

    li:nth-child(10) {
      width: 22%;
    }

    li:nth-child(11) {
      width: 17%;
    }
  }
}

//     <!-- 个人习惯 -->
.grxg {
  height: 260px;
  margin-top: 12px;
  background-color: white;

  span {
    line-height: 40px;
    margin-left: 8px;
  }

  div {
    li {
      float: left;
      width: 22%;
      margin-left: 10px;
      line-height: 35px;
      text-align: center;
      background-color: #f4f4f4;
      margin-top: 14px;
      border-radius: 27px;
      color: #666666;
    }

    li:first-child {
      width: 17%;
    }

    li:nth-child(2) {
      width: 17%;
    }

    li:nth-child(3) {
      width: 17%;
    }

    li:nth-child(4) {
      width: 32%;
    }

    li:nth-child(5) {
      width: 17%;
    }

    li:nth-child(6) {
      width: 17%;
    }

    li:nth-child(7) {
      width: 26%;
    }

    li:nth-child(8) {
      width: 17%;
    }

    li:nth-child(9) {
      width: 26%;
    }

    li:nth-child(10) {
      width: 26%;
    }

    li:nth-child(11) {
      width: 32%;
    }

    li:nth-child(12) {
      width: 26%;
    }

    li:nth-child(13) {
      width: 17%;
    }
  }
}

// 保存档案
.bcda {
  margin-top: 10px;
  width: 100%;
  height: 114px;
  background-color: white;

  span {
    line-height: 50px;
    color: #666666;
    font-size: 14px;
    margin-left: 60px;
  }

  button {
    width: 100%;
    height: 45px;
    border: none;
    background-color: #37cf6b;
    color: white;
  }
}
</style>

<template> <!-- vue实例外创建 -->
  <div class="ment">
    <div class="top">
      以下为必填项
    </div>
    <!-- 关系 -->
    <div>
      <!-- vant Picker选择器 -->
      <van-field v-model="fieldValue" is-link readonly label="关系" placeholder="请选择" @click="showPicker = true" />
      <van-popup v-model:show="showPicker" destroy-on-close round position="bottom">
        <van-picker :model-value="pickerValue" :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
      </van-popup>
    </div>

    <!-- 姓名 -->
    <div class="xingmin">
      <div>
        <span>姓名</span>
        <input type="text" placeholder="请输入姓名">
      </div>
    </div>
    <!-- 性别 -->
    <div class="xb">
      <div>
        <span>性别</span>
        <div>
          <van-radio-group v-model="checked">
            <van-radio name="1"> 男</van-radio>
            <van-radio name="2">女</van-radio>
          </van-radio-group>
        </div>
      </div>
    </div>
    <!-- 出生日期 -->
    <div class="csrq">
      <div>
        <van-field v-model="fieldValues" is-link readonly label="出生日期" placeholder="请输入" @click="shows = true" />

         
      </div>
    </div>
    <!--  -->
    <div class="koate">
      以下为选填项
    </div>
    <!-- 身高 -->
    <div class="sg">
      <div>
        <van-field v-model="fieldValues" is-link readonly label="身高" placeholder="请输入" @click="showPickers = true" />
        <van-popup v-model:show="showPickers" round position="bottom">
          <van-picker :model-value="pickerValues" :columns="columnss" @close="showPickers = false"
            @confirm="onConfirms" />
        </van-popup>
      </div>

    </div>
    <!-- 体重 -->
    <div class="tg">
      <div>
        <span>体重</span>

        <input type="text" placeholder="请填写Kg">
      </div>
    </div>
    <!-- BMi -->
    <div class="BMi">
      <div>
        <span>BMI</span>
        <input type="text" placeholder="系统会自动计算">
      </div>
    </div>
    <!-- 腰围 -->
    <div class="yw">
      <div>
        <div>
          <van-field v-model="fieldValuest" is-link readonly label="腰围" placeholder="请输入"
            @click="showPickerst = true" />
          <van-popup v-model:show="showPickerst" round position="bottom">
            <van-picker :model-value="pickerValuest" :columns="columnsst" @close="showPickerst = false"
              @confirm="onConfirmst" />
          </van-popup>
        </div>


      </div>

    </div>
    <!-- 吸烟史 -->
    <div class="xys">
      <div>
        <van-field v-model="fieldValuese" is-link readonly label="吸烟史" placeholder="请输入" @click="showPickerse = true" />
        <van-popup v-model:show="showPickerse" round position="bottom">
          <van-picker :model-value="pickerValuese" :columns="columnsse" @close="showPickerse = false"
            @confirm="onConfirmse" />
        </van-popup>
      </div>

    </div>
    <!-- 饮酒史 -->
    <div class="yjs">
      <div>
        <!-- vant Picker选择器 -->
        <van-field v-model="fieldValuex" is-link readonly label="饮酒史" placeholder="请选择" @click="showPickerx = true" />
        <!-- <van-popup v-model:show="showPickerx" destroy-on-close round position="bottom">
        <van-picker :model-value="pickerValuex" :columns="columnsx" @cancel="showPickerx = false" @confirm="onConfirmx" />
      </van-popup> -->
      </div>
    </div>
    <!-- 肝功能 -->
    <div class="gz">
      <span>肝功能</span>
      <div>
        <li>正常</li>
        <li>异常</li>
      </div>
    </div>
    <!-- 肾功能 -->
    <div class="sheng">
      <span>肾功能</span>
      <div>
        <li>正常</li>
        <li>异常</li>
      </div>
    </div>
    <!-- 婚姻状况 -->
    <div class="hyzq">
      <span>婚姻状况</span>
      <div>
        <li>未婚</li>
        <li>已婚</li>
        <li>其他</li>
      </div>
    </div>
    <!-- 生育状态 -->
    <div class="sy">
      <span>生育状态</span>
      <div>

        <li>未生育</li>
        <li>备孕期</li>
        <li>怀孕中</li>
        <li>已生育</li>
      </div>
    </div>
    <!-- 慢性病 -->
    <div class="mxb">
      <span>慢性病</span>
      <div>
        <li>暂无</li>
        <li>高血压</li>
        <li>糖尿病</li>
        <li>心脏病</li>
        <li>过敏性疾病</li>
        <li>哮喘</li>
        <li>白癫风</li>
        <li>癫痫</li>
        <li>其他</li>
      </div>
    </div>
    <!-- 家族病史 -->
    <div class="jzbs">
      <span>家族病史</span>
      <div>
        <li>暂无</li>
        <li>高血压</li>
        <li>糖尿病</li>
        <li>心脏病</li>
        <li>脑梗</li>
        <li>癌症</li>
        <li>白癜风</li>
        <li>癫痫</li>
        <li>哮喘</li>
        <li>近视</li>
        <li>冠心病</li>
        <li>脑卒中</li>
        <li>血脂异常</li>
        <li>慢性阻塞性肺疾病</li>
        <li>结核病</li>
        <li>肝炎</li>
        <li>严重精神障碍</li>
        <li>其他</li>
      </div>
    </div>
    <!-- 药物过敏 -->
    <div class="ywgm">
      <span>药物过敏</span>
      <div>
        <li>暂无</li>
        <li>青霉素</li>
        <li>头孢类</li>
        <li>破伤风抗毒素</li>
        <li>普鲁卡因</li>
        <li>地卡因</li>
        <li>磺胺类</li>
        <li>维生素 B1</li>
        <li>泛影葡胺</li>
        <li>阿司匹林</li>
        <li>其他</li>
      </div>
    </div>
    <!--  食物接触过敏-->
    <div class="swjc">
      <span>食物/接触过敏</span>
      <div>
        <li>暂无</li>
        <li>芒果</li>
        <li>牛奶</li>
        <li>坚果类</li>
        <li>海鲜</li>
        <li>黄瓜</li>
        <li>花粉</li>
        <li>油漆</li>
        <li>动物毛皮</li>
        <li>化妆品</li>
        <li>其他</li>
      </div>
    </div>
    <!-- 个人习惯 -->
    <div class="grxg">
      <span>个人习惯</span>
      <div>
        <li>低头族</li>
        <li>久坐</li>
        <li>久站</li>
        <li>强忍大小便</li>
        <li>喝酒</li>
        <li>熬夜</li>
        <li>跷二郎腿</li>
        <li>吸烟</li>
        <li>饭后卧床</li>
        <li>不常锻炼</li>
        <li>如厕玩手机</li>
        <li>不喜喝水</li>
        <li>其他</li>
      </div>
    </div>
    <!-- 保存档案 -->
    <div class="bcda">
      <span>如需要添加更多档案,请到个人中心>健康档案</span>
      <button>保存并返回</button>
    </div>
  </div>


</template>
<!-- 调用   <mycom></mycom> -->
<script setup lang="ts">
import { ref } from 'vue';

const fieldValue = ref('')
const showPicker = ref(false)
const pickerValue = ref([])
// 定义数据
const columns = [
  {
    text: '父母',
    value: 'Fumu'
  },
  {
    text: '子女',
    value: 'Zinv'
  },
  {
    text: '爱人',
    value: 'Airen'
  },
  {
    text: '其他',
    value: 'Qita'
  }
]

const onConfirm = ({ selectedValues, selectedOptions }) => {
  showPicker.value = false;
  pickerValue.value = selectedValues;
  fieldValue.value = selectedOptions[0].text;
}
const checked = ref('1')
// 身高
const fieldValues = ref('')
const showPickers = ref(false)
const pickerValues = ref([])
const columnss = [
  {
    text: '160cm',
    value: '1'
  },
  {
    text: '166cm',
    value: '2'
  },
  {
    text: '170cm',
    value: '3'
  },
  {
    text: '180cm',
    value: '4'
  }
]
const onConfirms = ({ selectedValues, selectedOptions }) => {
  showPickers.value = false;
  pickerValues.value = selectedValues;
  fieldValues.value = selectedOptions[0].text;
}


// 吸烟史
const fieldValuese = ref('')
const showPickerse = ref(false)
const pickerValuese = ref([])
const columnsse = [
  {
    text: '否',
    value: 'fu'
  },
  {
    text: '是',
    value: 'shi'
  },
]
const onConfirmse = ({ selectedValues, selectedOptions }) => {
  showPickerse.value = false;
  pickerValuese.value = selectedValues;
  fieldValuese.value = selectedOptions[0].text;
}


// 腰围
const fieldValuest = ref('')
const showPickerst = ref(false)
const pickerValuest = ref([])
const columnsst = [
  {
    text: '51cm',
    value: '1'
  },
  {
    text: '54cm',
    value: '2'
  },
  {
    text: '62cm',
    value: '3'
  },
  {
    text: '58cm',
    value: '4'
  }
]
const onConfirmst = ({ selectedValues, selectedOptions }) => {
  showPickerst.value = false;
  pickerValuest.value = selectedValues;
  fieldValuest.value = selectedOptions[0].text;
}

// 饮酒史

// const fieldValuex = ref('')
// const showPickerx = ref(false)
// const pickerValuex= ref([])
// // 定义数据
// const columnsx = [
//   {
//     text: '否',
//     value: 'Fumu',
//   },
//   {
//     text: '是',
//     value: 'Zinv',
//     children:[
//       {
//        text:'1年',
//        value:'11',
//        children:[
//         {
//          text:'白酒',
//          value:'111',
//          children:[
//           {
//            text:'少量',
//            value:'1111'
//           },
//           {
//              text:'适量',
//              value:'1112'
//           },
//           {
//               text:'大量',
//               value:'1113'
//           }
//         ]
//        },{

//        }
//       ]
//     },
//     {
//        text:'2年',
//        value:'12',
//        children:[
//         {
//          text:'啤酒',
//          value:'121',
//          children:[
//           {
//            text:'少量',
//            value:'1211'
//           },
//           {
//              text:'适量',
//              value:'1212'
//           },
//           {
//               text:'大量',
//               value:'1213'
//           }
//         ]
//        },{

//        }
//       ]
//     }
//   ]
//   },

// ]

// const onConfirmx = ({ selectedValues, selectedOptions }) => {
//   showPickerx.value = false;
//   pickerValuex.value = selectedValues;
//   fieldValuex.value = selectedOptions[0].text;
// }

//日期






</script>